<template>
  <div>
    <h1>图书表</h1>
    <table border="6" cellspacing="0" align="center">
      <tr>
        <td>ID</td>
        <td>书名</td>
        <td>价格</td>
        <td>所属</td>
      </tr>
      <tr v-for="i in data">
        <td>{{ i.id }}</td>
        <td>{{ i.name }}</td>
        <td>{{ i.price }}</td>
        <td>{{ i.cate.name }}</td>
      </tr>
    </table>
    <button v-for="i in page_range" @click="btn(i)">{{ i }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {},
      page_range: ''
    }
  },

  methods: {
    btn(id) {
      this.axios.get('book/?pid=' + id + '&id=' + 1).then(res => {
        this.data = res.data.data
        this.page_range = res.data.page_range
      })
    }
  },

  mounted() {
    this.btn(1)
  }
}
</script>

<style scoped>

</style>
